<template>
  <div class="p-4">
    <div class="ant_table">
      <Table
        style="height: 100%"
        :dataSource="dataSource"
        :columns="columns"
        :pagination="pagination"
        @change="tableChangeFn"
      >
        <template #action="{ record }">
          <LoadingOutlined v-if="actionLoading" />
          <div class="action" v-else>
            <div
              class="action_btn"
              @click="goAdditionRecord(record)"
              v-if="isButtonVisible(18000003) && verifyProjectLogNumber(record)"
              >去审核</div
            >
          </div>
        </template>
      </Table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Table, message, Popconfirm, Popover } from 'ant-design-vue';
  import { getProjectManagementList, getApplyLogNumberQueryApi } from '/@/api/projectManagement';

  import { useRouter, useRoute } from 'vue-router';
  import qs from 'qs';

  import { queryAllLicense } from '/@/api/api';
  import { LoadingOutlined } from '@ant-design/icons-vue';

  const router = useRouter();
  let route = useRoute();
  const isButtonVisible = (id) => {
    let rulesArr = route?.meta?.rules?.map((rule) => rule.id) || [];
    return rulesArr.includes(id);
  };
  const allLicense = ref([]);
  onMounted(() => {
    console.log('123');
    getTableData();
    queryAllLicense().then((res) => {
      allLicense.value = res;
    });
  });
  // 获取列表数据
  const getTableData = () => {
    getProjectManagementList({
      page: pagination.value.current,
      limit: pagination.value.pageSize,
      createStaffType: '1',
    }).then((res) => {
      if (res.items) {
        pagination.value.total = res.total || 0;
        dataSource.value = res.items || [];
        getApplyLogNumberQueryFn();
      }

      console.log(res, 'res');
    });
  };

  const actionLoading = ref(false); //操作一栏是否显示loadding
  const applyLogNumberQueryData = ref([]);
  const getApplyLogNumberQueryFn = () => {
    actionLoading.value = true;
    let data = {
      projectIds: dataSource.value.map((item) => item.id) || [],
    };
    getApplyLogNumberQueryApi(data)
      .then((res) => {
        applyLogNumberQueryData.value = res;
        console.log(res, 'res');

        actionLoading.value = false;
      })
      .catch(() => (actionLoading.value = false));
  };
  // 校验项目对应的项目记录是否超过0条
  const verifyProjectLogNumber = (record) => {
    return applyLogNumberQueryData.value.some((item: any) => {
      return item.projectId == record.id && item.number > 0;
    });
  };

  //跳转新增/编辑
  const goEdit = (action = 'add', data = []) => {
    let url = '';
    if (action == 'add') {
      url = '/dashboard/addProject';
    } else {
      url = `/dashboard/editProject?${qs.stringify(data)}`;
    }
    router.push(url);
  };

  //列表数据
  const dataSource = ref([]);

  // 列表配置
  const columns = ref([
    {
      title: '项目隶属',
      align: 'left',
      dataIndex: 'companyName',
      key: 'companyName',
    },
    {
      title: '项目名称',
      align: 'left',
      dataIndex: 'name',
      key: 'name',
    },

    // {
    //   title: '项目金额',
    //   align: 'left',
    //   dataIndex: 'amount',
    //   key: 'amount',
    // },
    {
      title: '地址',
      align: 'left',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '合伙人',
      align: 'left',
      dataIndex: 'createStaffName',
    },
    {
      title: '甲方',
      align: 'left',
      dataIndex: 'firstParty',
      key: 'firstParty',
    },
    // {
    //   title: '验收内容',
    //   align: 'left',dataIndex: 'checkContent',
    //   key: 'checkContent',
    //   width: 200,
    //
    // },
    // {
    //   title: '验收时间',
    //   align: 'left',dataIndex: 'checkDate',
    //   key: 'checkDate',
    //
    //
    // },
    // {
    //   title: '合同附件',
    //   align: 'left',dataIndex: 'contract',
    //   key: 'contract',
    //   slots: { customRender: 'contract' },
    //
    // },
    // {
    //   title: '出图类型',
    //   align: 'left',dataIndex: 'designType',
    //   key: 'designType',
    //
    //
    // },
    // {
    //   title: '出图时间',
    //   align: 'left',dataIndex: 'designDate',
    //   key: 'designDate',
    //
    //
    // },
    // {
    //   title: '开票信息',
    //   align: 'left',dataIndex: 'invoice',
    //   key: 'invoice',
    //   width: 200,
    //
    // },
    {
      title: '添加时间',
      align: 'left',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '操作',
      align: 'left',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
      width: 80,
    },
  ]);

  //分页器对象
  const pagination = ref({
    current: '1',
    pageSize: '10',
    pageSizeOptions: ['10', '20', '50', '100'],
    total: 0,
    showTotal: (totals) => `总${totals}条数据`,
    showSizeChanger: true,
  });

  // table变化时出发  筛选/跳转
  const tableChangeFn = (e) => {
    pagination.value.current = String(e.current);
    pagination.value.pageSize = String(e.pageSize);
    console.log(e, 'e');
    getTableData();
  };

  // 跳转到增加记录
  const goAdditionRecord = (record) => {
    router.push(`/dashboard/addRecords?id=${record.id}`);
  };
</script>

<style lang="less" scoped>
  .add_project {
    margin-bottom: 10px;
  }
  .action_btn {
    color: #1990ff;
    cursor: pointer;
    margin: 5px 0;
  }
  .file_download {
    cursor: pointer;
    color: rgba(0, 175, 233);
  }
</style>
